import React, {Component} from 'react'
import Progress from '../components/progress'
import '../components/grids.css'
class ProgressPage extends Component {
  constructor(props) {
    super(props)
    this.upload = this.upload.bind(this)
    this.state = {
      value: 0
    }
  }

  upload() {
    this.setState({value: ++this.state.value % 100});
    this.setState({toastTimer : setTimeout(this.upload,20)})
  }

  componentDidMount() {
    this.upload()
  }

  componentWillUnmount() {
    this.state.toastTimer && clearInterval(this.state.toastTimer);
  }

  render() {
    return (
        <section className="page">
          <div className="hd">
            <h1 className="title">Progress</h1>
            <p className="sub_title"></p>
          </div>
          <div className="bd spacing">
            <Progress width={this.state.value}/>
          </div>
        </section>
    );
  }
}

export default ProgressPage;
